<script setup>
import {onMounted, ref} from "vue";
import {doGet} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
import router from "../../router/router.js";

// 分页查询集合数据
const dataList = ref([])
// 分页对象
const pageInfo = ref({})
const searchCondition = ref({})

const ownerList = ref([])

const searchConditionRef = ref()

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 加载数据
const loadData = (current,size) => {
  console.log('负责人ID', searchCondition.value.ownerId)
  console.log('负责名称', searchCondition.value.name)
  console.log('活动预算',searchCondition.value.cost)
  console.log('创建时间', searchCondition.value.createTime)

  console.log('活动时间', searchCondition.value.activityTime)
  // 活动开始时间
  let startTime = ''
  // 活动结束时间
  let endTime = ''
  for (let key in searchCondition.value.activityTime) {
    if (key === '0') {
      startTime = searchCondition.value.activityTime[key]
    }
    if (key === '1') {
      endTime = searchCondition.value.activityTime[key]
    }
  }
  console.log('活动开始时间', startTime)
  console.log('活动结束时间', endTime)

  // 准备参数
  let params = {
    current: current,
    size: size,
    name: searchCondition.value.name,
    ownerId: searchCondition.value.ownerId,
    cost: searchCondition.value.cost,
    createTime: searchCondition.value.createTime,
    startTime: startTime,
    endTime: endTime
  }
  doGet('/api/activity/page', params).then(res => {
    dataList.value = res.data.data.list
    pageInfo.value.total = res.data.data.total
  })
}

// 加载负责人列表
const loadOwners = () => {
  doGet('/api/user/list',{}).then(res => {
    if (res.data.code === 200) {
      ownerList.value = res.data.data;
    } else {
      showMessage('查询负责人列表失败，原因：'+res.data.msg,'error')
    }
  })
}

// 跳转至编辑页面
const toEdit = (id) => {
  router.push('/dashboard/activity/edit/'+id)
}

// 跳转至市场活动详情页面
const toDetail = (id) => {
  router.push('/dashboard/activity/detail/'+id)
}

onMounted(()=>{
  loadData(1,10)
  loadOwners()
})
</script>

<template>

  <el-form ref="searchConditionRef"
      :inline="true" :model="searchCondition" class="demo-form-inline">
    <el-form-item label="负责人" prop="ownerId">

      <el-select
          v-model="searchCondition.ownerId"
          placeholder="请选择负责人"
          style="width: 240px">
        <el-option
            v-for="user in ownerList"
            :key="user.id"
            :label="user.name"
            :value="user.id"
        />
      </el-select>
    </el-form-item>


    <el-form-item label="活动名称" prop="name">
      <el-input v-model="searchCondition.name" placeholder="请输入活动名称"/>
    </el-form-item>

    <el-form-item label="活动时间" prop="activityTime">
      <el-date-picker
          v-model="searchCondition.activityTime"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="searchCondition.cost"  placeholder="请输入活动预算"/>
    </el-form-item>

    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker
          v-model="searchCondition.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="loadData(1,10)">搜索</el-button>
      <el-button @click="resetForm(searchConditionRef)">重置</el-button>
    </el-form-item>

  </el-form>

  <hr>
  <el-button type="primary" @click="router.push('/dashboard/activity/add')">录入市场活动</el-button>
  <el-button type="danger" @click="toBatchDel">批量删除</el-button>
  <div>&nbsp;</div>
  <el-table
      :data="dataList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="负责人" property="ownerName"  width="120"/>
    <el-table-column label="活动名称" width="200" property="name"/>
    <el-table-column label="开始时间" width="200" property="startTime"/>
    <el-table-column label="结束时间" width="200" property="endTime"/>
    <el-table-column label="活动预算" width="150" property="cost"/>
    <el-table-column label="创建时间" width="200" property="createTime"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="toDetail(scope.row.id)">
          详情
        </el-button>
        <el-button type="success" size="small" @click="toEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>
</template>

<style scoped>

</style>